<template>
  <div class="cemeteryInfo overflowY" v-loading="loading">
    <div class="PageContent">
      <div class="PageItem">
        <el-row :gutter="20" class="card_list">
          <el-col :span="6">
            <el-card shadow="hover" style="background:#37B7FF;">
              <h2>公墓数量</h2>
              <div class="count_to">
                <countTo
                  :startVal="startVal"
                  :endVal="cemeteryNumber"
                  :duration="3000"
                ></countTo
                >
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" style="background:#FFC35C;">
              <h2>墓穴数量</h2>
              <div class="count_to">
                <countTo
                  :startVal="startVal"
                  :endVal="graveNumber"
                  :duration="3000"
                ></countTo
                >
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" style="background:#A566ED;">
              <h2>安置数量</h2>
              <div class="count_to">
                <countTo
                  :startVal="startVal"
                  :endVal="placeNumber"
                  :duration="3000"
                ></countTo
                >
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" style="background:#F87053;">
              <h2>空闲数量</h2>
              <div class="count_to">
                <countTo
                  :startVal="startVal"
                  :endVal="freeNumber"
                  :duration="3000"
                ></countTo
                >
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="anzhi">
          <div class="anzhi_title">
            <h2>墓穴安置率</h2>
          </div>
          <div class="progress_box">
            <el-progress
              :stroke-width="14"
              :percentage="percentage"
            ></el-progress>
          </div>
        </el-row>
        <el-row :gutter="20" class="bottom">
          <el-col :span="24">
            <div class="right_top">
              <div class="right_top_title">
                <h2>
                  <span>临沂市公墓墓穴安葬Top</span>
                </h2>
              </div>
              <div class="right_top_content">
                <ul class="top10_list">
                  <li
                    class="top10_item"
                    v-for="(item, index) in top10List"
                    :key="index"
                  >
                    <div class="item_left">
                      <div class="tag">{{ index+1 }}</div>
                      <el-tooltip class="item" effect="dark" :content="item.cemeteryName" placement="right">
                        <div class="item_name">{{ item.cemeteryName }}</div>
                      </el-tooltip>
                    </div>
                    <div class="item_center">
                      <el-progress
                        status="success"
                        :text-inside="true"
                        :stroke-width="10"
                        :percentage="item.number"
                      ></el-progress>
                    </div>
                    <div class="item_right">

                      <div class="item_number">{{ item.cemeteryNumber }}/{{item.cemeteryOccupy}}</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
          <el-col :span="8"></el-col>
          <el-col :span="8"></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import countTo from "vue-count-to";
import * as API from '@/api/civilAffairsBureau/index'
export default {
  data() {
    return {
      loading: true, //加载
      startVal: 0, //开始值
      cemeteryNumber: 0, //公墓数量
      graveNumber: 0, //墓穴数量
      placeNumber: 0, //安置数量
      freeNumber: 0, //空闲数量
      percentage: 0, //墓穴安置率
      top10List: [], //top10
    };
  },
  components: { countTo },
  created(){
    //获取公墓数量基本信息
    this.getCemeteryInfo();
    //公墓排名
    this.getCemeteryRanking()
  },
  mounted() {},
  methods: {

    //获取公墓
    async getCemeteryInfo(){
      const res = await API.findCemeteryNumber()
      if(res.code==1){
        if(!res.data){
          return ;
        }
        this.cemeteryNumber=res.data.cemeterySumNumber;//公墓数量
        this.graveNumber=res.data.cemeteryGraveNumber;//墓穴数量
        this.placeNumber=res.data.cemeteryEmployNumber;//安置数量
        this.freeNumber=res.data.cemeteryIdleNumber;//空闲数量
        this.percentage=!this.placeNumber?0:Math.round((this.placeNumber/this.graveNumber)*100)//墓穴安置率
      }else{
        this.$message.error('数据读取失败');
      }
    },
    //公墓排名
    async getCemeteryRanking(){
      const res = await API.findFuneralCmeteryBDO();
       if(res.code==1){
         this.top10List=res.data.cemeteries
       }else{
        this.$message.error('数据读取失败');
      }
      this.loading=false
    }
  },
};
</script>

<style lang="scss" scoped>
.cemeteryInfo {
  h3 {
    line-height: 50px;
  }
  .PageContent{
    margin-top: 0;
  }
  .PageItem {
    height: auto;
    background: none;
    padding:20px 0;
  }
  .anzhi{
    background: #fff;
    border-radius: 10px;
    padding:20px;
    min-height: 100px;
    margin-bottom: 22px;
    .anzhi_title{
      border-left: 4px solid #37B7FF;
      text-indent: 10px;
      margin-bottom: 30px;
    }
    .progress_box{
      width: 60%;
      /deep/ .el-progress-bar__inner{
        background-color: #A566ED;
      }
      /deep/ .el-progress__text{
        color: #A566ED;

      }
    }
  }
  .card_list {
    margin-bottom: 22px;
    .el-card {
      border-radius: 8px;
      color:#fff;
      cursor: pointer;
      /deep/ .el-card__body{
        display: flex;
        align-items: center;
        min-height: 100px;
        justify-content: center;
      }
      h2 {
        line-height: 30px;
        font-size: 20px;
        margin-right: 20px;
      }
      .count_to {
        font-size: 30px;
      }
      #topBuryingCharts,
      #topCremationCharts {
        width: 100%;
        height: 50px;
      }
      .progress {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        .el-progress {
          width: 100%;
          /deep/ .el-progress-bar__innerText {
            display: none;
          }
        }
      }
    }
  }
  .bottom{
    background: #fff;
    padding:20px 0;
  }
  .right_top{
      margin-bottom: 30px;
      .right_top_title{
        h2{
          border-left: 4px solid #37B7FF;
          display: flex;
          align-items: center;
          text-align: center;
          color:#141414;
          font-size: 14px;
          text-indent: 10px;
          border-bottom: 1px solid #F6F6F7;
          i{
            color: #000;
            font-weight: 800;
            margin-right: 15px;
          }
        }
      }
      .right_top_content{
        min-height: 580px;
        .top10_list{
          .top10_item{
            display: flex;
            box-sizing: border-box;
            padding:0 5px;
            cursor: pointer;
            align-items: center;
            line-height: 50px;
            justify-content: space-between;
            .item_left{
              display: flex;
              align-items: center;
              .tag{
                width: 30px;
                height:30px;
                border-radius: 50%;
                text-align: center;
                line-height: 30px;
                background:#CAD6EF ;
                color: #fff;
                margin-right: 15px;
              }
              .item_name{
                width: 250px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            .item_center{
              flex:1;
              /deep/ .el-progress.is-success .el-progress-bar__inner{
                background-color: #37B7FF;
              }
              /deep/ .el-progress-bar__innerText{
                display: none;
              }
            }
            .item_right{
              display: flex;
              align-items: center;
              color: #37B7FF;
              .item_number{
                width: 60px;
                text-align: center;

              }
              .el-progress{
                width: 100px;
                margin-right: 15px;
                /deep/ .el-progress-bar__innerText{
                  display: none;
                }
              }

            }
          }
          // .top10_item:nth-of-type(even){
          //   background: #EFF9FE;
          // }
          .top10_item:nth-of-type(1){
            .tag{
              background: #F87053;
            }


          }
          .top10_item:nth-of-type(2){
            .tag{
              background: #A566ED;
            }
          }
          .top10_item:nth-of-type(3){
            .tag{
              background: #FFC35C;
            }
          }
        }
      }
    }
    .right_bottom{
      .right_bottom_title{
        h2{
          display: flex;
          align-items: center;
          text-align: center;
          color:#000;
          font-size: 14px;
          font-weight: 600;
          line-height: 50px;
          line-height: 50px;
          border-bottom: 1px solid #F6F6F7;
          i{
            color: #000;
            font-weight: 800;
            margin-right: 15px;
          }
        }
      }
      .right_bottom_content{
        width: 100%;
        #rightBottomCharts{
          width: 100%;
          height: 500px;
        }
      }
    }
}
</style>
